<template>
  <div>
    <div class="search_wrap">
      <div style="display: flex;">
        <el-input v-model="searchText"></el-input>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </div>
      <div>
        <el-button type="success" @click="toExport" >导出成excel</el-button>
        <el-button type="success" @click="adminFalg=true">添加</el-button>
      </div>
      
    </div>
    <div class="table_wrap">
      <!-- 使用全局组件 -->
      <tableTitle title="管理员列表"></tableTitle>
      <el-table :data="adminList">
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="turename" label="姓名"></el-table-column>
        <el-table-column label="后台权限">
          <template #default="{row}">
            <div>
              
              <el-tag type="success" v-if="row.power=='1'">系统管理员</el-tag>
            <el-tag type="primary"  v-else>课程管理员</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="注册日期">
          <template #default="{row}">
            <div>
               {{new Date(row.createAt).toLocaleString()}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-link type="primary" @click="toEdit(row)">编辑</el-link>
            <el-link type="danger" @click="toDel(row.tokenId)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination :total="total" :page-size="pageSize" background layout="prev,pager,next"
      @current-change="pageChange">

      </el-pagination>
    </div>
    <!-- 添加和修改管理员  -->
     <el-dialog :title="dialogTitle" :visible="adminFalg" width="60%">
         <el-form ref="addForm" :model="adminForm"  :rules="rules" label-width="100px">
          <el-form-item prop="userName" label="用户名">
            <el-input v-model="adminForm.userName"></el-input>
          </el-form-item>
           <el-form-item prop="turename" label="姓名">
            <el-input v-model="adminForm.turename"></el-input>
          </el-form-item>
           <el-form-item prop="phone" label="手机号">
            <el-input v-model="adminForm.phone"></el-input>
          </el-form-item>
          <el-form-item prop="power"  label="权限选择">
            <el-select  v-model="adminForm.power" placeholder="请选择权限">
              <el-option value="1" label="系统管理员"></el-option>
              <el-option value="2" label="课程管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            
                <el-button @click="sureAdd" style="margin-left:20%; margin-right: 15%;" type="primary">
                     确定
               </el-button>
                <el-button  @click="adminFalg=false" type="danger"> 
                     取消
               </el-button>
            
          </el-form-item>
        
         </el-form>
         
     </el-dialog>
  </div>
</template>
<script>
// 导入添加管理员接口
import { addAdminApi,getAdminListApi,deleteAdminApi,updateAdminApi } from '@/api/admin';
// 导入excel导出插件
import * as  XLSX from 'xlsx'
export default {
  name: 'Admin',

  data(){
    return {
      dialogTitle:"添加管理员",//弹出层标题
      adminList:[],//管理员列表
      total:0,//管理员总数
      pageSize:3,//每页显示条数
      pageStart:1,//分页起始页
      searchText:"",//搜索关键字
      adminFalg:false,//添加和修改管理员弹出层控制器
      // 管理员添加和修改表单标准化
      adminForm:{
          userName:"",//用户名
          tokenId:"",//用户id 修改时候需要
          turename:"",//姓名
          phone:"",//手机号
          password:"123456", //密码
          power:"" //权限
      },
      rules:{
        userName:[{required:true,message:"用户名不能为空",trigger:"blur"}],
        turename:[{required:true,message:"姓名不能为空",trigger:"blur"}],
        phone:[{pattern:/^1[3|4|5|6|7|8|9]\d{9}$/,message:"手机号格式不正确",trigger:"blur"}],
        power:[{required:true,message:"请选择权限",trigger:"change"}]
      }
    }
  },
  created(){
   this.getList();//获取管理员列表
   
  },
  methods:{
    toExport(){
      // 用插件 将表格数据 导出成sheet表
      // XLSX.utils.json_to_sheet
      let sheet=XLSX.utils.json_to_sheet(this.adminList)
      // 创建工作簿
      let book=XLSX.utils.book_new();
      // 将sheet表添加到工作簿中 
      XLSX.utils.book_append_sheet(book,sheet,"管理员列表")
      // 将工作簿导出成excel文件
      XLSX.writeFile(book,"管理员列表.xlsx")
    },
    toEdit(row){ //编辑回显方法
      this.adminFalg=true;//打开弹出层
      this.dialogTitle="修改管理员"//改变弹出层标题
      this.adminForm.userName=row.userName;//回显用户名
      this.adminForm.turename=row.turename;//回显姓名
      this.adminForm.phone=row.phone;//回显手机号
      // power --》 1  null 
      this.adminForm.power=row.power==1?"1":"2";//回显权限
      // tokenId--》用户id 编辑接口需要的tokenId 存储下
      this.adminForm.tokenId=row.tokenId //当前编辑的管理员id
    },
    async toDel(tokenId){ //删除管理员接口
        let res=await deleteAdminApi(tokenId)
        console.log(res,"--删除接口的返回")
        this.$message.success("删除成功")
        this.getList()//重新获取管理员列表
    },
    toSearch(){ //点击搜索按钮
      this.getList(); //重新获取管理员列表
      this.searchText="" //清空查询输入框
    },
    pageChange(val){ //分页器改变事件
      // val--当前页码
      this.pageStart=val; 
      this.getList();//重新获取管理员列表
    },
    async getList(){ //获取管理员列表方法
        let res=await getAdminListApi({
          pageStart:this.pageStart, //当前页码
          searchText:this.searchText//搜索字段
        })
        this.adminList=res.data.list;
        this.total=res.data.count;
        this.pageSize=res.data.pageSize;

        console.log(res,"管理员列表")
    },

    sureAdd(){ //添加管理员或修改管理员
        // 表单所有验证通过
       this.$refs.addForm.validate(async (vali)=>{
          if(vali){
            // 如果adminForm 中有tokenId 说明现在要进行编辑
            if(this.adminForm.tokenId){ //编辑接口
                let editRes=await updateAdminApi(this.adminForm)
                console.log(editRes)
                this.$message.success("修改管理员成功")
            }else{  // 调用添加管理员接口
                                  // 把this.adminForm 收集的所有数据传递给接口
                  let res=await addAdminApi(this.adminForm)
                  console.log(res,"------")
                     this.$message.success("添加管理员成功")
            }
                  // 清空表单 自带重置方法
                    this.adminFalg=false;//关闭弹出层
                    this.getList(); //重新获取管理员列表
                    this.dialogTitle="添加管理员"//弹出层标题
          }
       })
    }
  },
  watch:{
    adminFalg(newval){//监听弹出层状态
      if(!newval){ //弹出层关闭清空所有输入框
        this.adminForm.userName=""
        this.adminForm.turename=""
        this.adminForm.phone=""
        this.adminForm.power=""
        this.adminForm.tokenId=""
      }
    } 
  }
}
</script>
<style lang="scss" >
    .search_wrap{
      width: 900px;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      box-sizing: border-box;
    }
    .table_wrap{
        width: 900px;
          margin: 0 auto;
    }
</style>